<template>
	<view>
		<!-- 自定义导航栏 -->
		<news-nav-bar :tabList="tabList" :tabIndex="tabIndex" @changeTab="changeTab"></news-nav-bar>
		<!-- 信息列表 -->
		<view class="uni-tab-bar">
			<swiper class="swiper-box" :style="{height:swiperHeight + 'px'}" :current="tabIndex" @change="changeSwiper">
				<!-- 关注 -->
				<swiper-item>
					<scroll-view scroll-y class="list" @scrolltolower="reachBottom">
						<block v-for="(item,index) in followList.list" :key="index">
							<com-list :item="item" :index="index"></com-list>
						</block>
						<u-loadmore :status="followList.loadStatus"></u-loadmore>
					</scroll-view>
				</swiper-item>
				<!-- 话题 -->
				<swiper-item>
					<scroll-view scroll-y class="list" @scrolltolower="reachBottom">
						<!-- 搜索框 -->
						<view class="search-input">
							<input class="uni-input" type="text" placeholder="请输入搜索内容" placeholder-class="iconfont iconsousuo search-place" />
						</view>
						<!-- 轮播图 -->
						<u-swiper :list="topicList.swiper" indicator-pos="bottomRight" mode="round" :effect3d="true" :title="true" height="400"></u-swiper>
						<!-- 热门分类 -->
						<news-topic-nav :list="topicList.topic"></news-topic-nav>
						<!-- 最近更新 -->
						<view class="last-update">
							<view class="last-update-name">最近更新</view>
							<news-topic-list :list="topicList.list"></news-topic-list>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 导航标签
				tabIndex:1,
				tabList:[
					{name:"关注",id:'follow'},
					{name:"话题",id:'topic'}
				],
				swiperHeight:0,
				// 关注列表
				followList:{
					 // 加载更多
					loadStatus: 'loadmore',
					// 列表数据
					list:[
						// 文字
						{
							userPic:"/static/img/header/03.svg", // 头像
							username:"立春", // 用户名
							isFollow:true, // 是否关注
							sex:0, // 0 男 1 女
							age:25, 
							title:"春雨惊春清谷天，夏满芒夏暑相连。",
							titlePic:"",
							video:false,
							share:false,
							path:"四川 成都",
							shareNUm:15,
							commentNum:65,
							goodNum:80
						},
						// 图文
						{
							userPic:"/static/img/header/02.svg", // 头像
							username:"雨水", // 用户名
							isFollow:false, // 是否关注
							sex:1, // 0 男 1 女
							age:18, 
							title:"秋处露秋寒霜降，冬雪雪冬小大寒。",
							titlePic:"/static/img/list/06.svg",
							video:false,
							share:false,
							path:"四川 成都",
							shareNUm:10,
							commentNum:25,
							goodNum:30
							
						},
						// 视频
						{
							userPic:"/static/img/header/01.svg", // 头像
							username:"惊蛰", // 用户名
							isFollow:true, // 是否关注
							sex:0, // 0 男 1 女
							age:20, 
							title:"每月两节不变更，最多相差一两天。",
							titlePic:"/static/img/list/05.svg",
							video:{
								playNum:"20W",
								playLong:"03:15"
							},
							share:false,
							path:"四川 成都",
							shareNUm:16,
							commentNum:5,
							goodNum:90
							
						},
						// 分享
						{
							userPic:"/static/img/header/02.svg", // 头像
							username:"谷雨", // 用户名
							isFollow:true, // 是否关注
							sex:0, // 0 男 1 女
							age:30, 
							title:"",
							titlePic:"",
							video:false,
							share:{
								title:"立冬小雪飘，大雪兆丰年，冬至数九日，小寒又大寒。",
								titlePic:"/static/img/list/04.svg"
							},
							path:"四川 绵阳",
							shareNUm:40,
							commentNum:75,
							goodNum:40
							
						}
					]
				},
				// 话题列表
				topicList: {
					swiper:[ // 轮播图
						{image:'/static/img/demo/spring.svg',title:'迷人的春天是令人欢欣鼓舞的，虽然春风还是冷飕飕的。'},
						{image:'/static/img/demo/summer.svg',title:'一道残阳铺水中，半江瑟瑟半江红。'},
						{image:'/static/img/demo/autumn.svg',title:'金秋的阳光温馨恬静，金秋的微风和煦轻柔。'},
						{image:'/static/img/demo/winter.svg',title:'风吹过，寒气直侵入骨头，然后慢慢地在身体内扩散。'}
					],
					topic:[ // 话题
						{title:'最新',id:1},
						{title:'游戏',id:2},
						{title:'健身',id:3},
						{title:'情感',id:4},
						{title:'故事',id:5},
						{title:'旅游',id:6}
					],
					list:[ // 列表
						{title:"秋天的第一杯奶茶",img:"/static/img/list/01.svg",desc:"有人请你喝第一杯奶茶吗？",totalNum:3650,todayNum:680},
						{title:"要么瘦，要么死",img:"/static/img/list/02.svg",desc:"今天你去健身了吗，坚持锻炼。",totalNum:7850,todayNum:308},
						{title:"打工人",img:"/static/img/list/03.svg",desc:"敬一杯，追梦的打工人。",totalNum:1150,todayNum:100}
					]
				}
			}
		},
		onLoad() {
			// 设置swiperHeight
			uni.getSystemInfo({
			    success: (res) => {
					this.swiperHeight = res.windowHeight - uni.upx2px(100);
			    }
			});
		},
		methods: {
			// tabbar点击
			changeTab(index) {
				this.tabIndex = index;
			},
			// swiper滑动
			changeSwiper(e) {
				this.tabIndex = e.detail.current;
			},
			// scroll-view到底部加载更多
			reachBottom() {
				// 是否可加载
				if (this.followList.loadStatus !== 'loadmore') return;
				// 加载更多
				this.followList.loadStatus = "loading";
				setTimeout(() => {
					this.getList();
				}, 1000);
			},
			// 获取列表
			getList(idx) {
				// 随机添加5条数据
				for(let i = 0; i < 5; i++) {
					let index = this.$u.random(0, this.followList.list.length - 1);
					let data = JSON.parse(JSON.stringify(this.followList.list[index]));
					this.followList.list.push(data);
				}
				// 更新加载状态
				this.followList.loadStatus = "nomore";
			}
		}
	}
</script>

<style lang="scss" scoped>
.search-input {
	padding: 20rpx;
	.uni-input {
		background-color: #F4F4F4;
		border-radius: 10rpx;
	}
}
.search-place {
	display: flex;
	justify-content: center;
	font-size: 27rpx;
}
.last-update {
	padding: 20rpx;
	.last-update-name {
		font-size: 32rpx;
		padding-bottom: 5rpx;
	}
}
</style>
